<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- art-template是js库，是一个简约、超快的模板引擎，用于简化拼接字符串，把js数据传到html中展示出来 -->
    <script src="js/template-web.js"></script>
</head>
<body>

    <!-- 定义容器 -->
    <div id="mydiv"></div>
    <div id="mydiv2"></div>

    <!-- 定义一个模板 -->
    <script type="text/html" id="demo">
        <div>{{ name }}</div>
        <div>{{ age }}</div>
        <div>{{ sex }}</div>
    </script>


<!--     
    
    art-template的模板的基本语法是：
    {{ 对象中的属性名 }}

    类似于js的for循环
    {{ each 对象的属性名  value index }}


    {{ /each }}

    类似于js的判断
    {{ if 条件 }}


    {{ /if }}


 -->

    <script>
        var user={
            name:"alice",
            age:20,
            sex:"男"
        };
        /* 
        template(id,data) 返回将数据渲染到模板后的字符串给我们
            id:模板的id的值
            data:一定是对象格式的数据 
            
        */

        var str=template("demo",user);
        document.getElementById("mydiv").innerHTML=str;

       /*  
        template.render(string,data)返回将数据渲染到前面的字符串后的字符串给我们
            string:字符串,类似于<p>{{name}}</p>
            data:一定是对象格式的数据 
        */

        var s1="<p>{{name}}</p><p>{{age}}</p><p>{{sex}}</p>";
        var str2=template.render(s1,user);
        document.getElementById("mydiv2").innerHTML=str2;
    </script>

</body>
</html>